<form id="editMenuForm" lay-filter="editMenuForm" class="layui-form model-form ">
    <input name="userId" type="hidden"/>
    <div class="layui-form-item">
        <label class="layui-form-label">目录名称</label>
        <div class="layui-input-block">
            <input name="name" placeholder="请输入目录名称" type="text" class="layui-input" maxlength="20"
                   lay-verType="tips" lay-verify="required" required id="editname"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上级目录</label>
        <div class="layui-input-block">
            <input name="nickName" placeholder="" type="text" class="layui-input" maxlength="20"
                   lay-verType="tips" lay-verify="required" disabled id="parentName"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择上级目录</label>
        <div class="layui-input-block">
            <ul id="editcatalogTree" class="ztree" ></ul>
        </div>
    </div>
    <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" ew-event="closePageDialog">取消</button>
        <button class="layui-btn layui-btn-sm" lay-filter="editFormSubmit" lay-submit >确定</button>
    </div>
</form>
<script>
    //获取权限方法
    var userInfo = getAuthority();
    var powerlist = JSON.parse(userInfo).permissions;
    /*自定义函数判断权限*/
    template.defaults.imports.hasPower = function(data){
        if(powerlist.includes(data)){
            return true;
        }
        return true;
    };

    layui.use(['layer', 'form', 'admin','tree'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var tree = layui.tree;

        var Authorization;//请求接口用
        var tableCatalog = window.tableCatalog ;
        var editMenu={//编辑目录参数
            parent_id:''
        }
        var setting={//树设置
            catalogTreeSetting:{//原点区划树设置-区划变更弹窗使用
                edit: {
                    enable: true,
                    showRemoveBtn: false,
                    showRenameBtn: false,
                    drag: {
                        isCopy: true,
                        isMove: false,
                        prev: false,
                        next: false,
                        inner: false
                    }
                },
                data: {
                    key: {
                        children: "sub"
                    },
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onExpand: onExpandCatalogTree,
                    onClick: zTreeCatalogOnClick
                },
                view: {
                    showIcon: true,
                    showLine: true
                }
            }
        }
        if(userInfo){
            var access_token = localStorage.getExpire("access_token");
            var token_type = localStorage.getExpire("token_type");
            Authorization = token_type+" "+access_token;
            lazyLoadCatalogTree();
            $("#editname").val(tableCatalog.selectedCatalog.name)
            if(tableCatalog.selectedCatalog.parId=="root"){
                $("#parentName").val('根目录');
            }else{
                $("#parentName").val(tableCatalog.selectedCatalog.parentName)
            }
            editMenu.parent_id = tableCatalog.selectedCatalog.parId;
        }

        // 表单提交事件
        form.on('submit(editFormSubmit)', function (data) {
            let req = {
                id:tableCatalog.selectedCatalog.id,
                name:data.field.name,
                parent_id:editMenu.parent_id,
                version:tableCatalog.selectedCatalog.version
            }
            axios({
                method: 'PUT',
                url:macroUrl.catalog.updateCatalog,
                data:$.param(req),
                headers:{
                    'Authorization':Authorization
                }
            })
                .then(function (response) {
                    if(response.status == 200 &&response.data.message == "success"){
                        layer.msg("编辑成功", {icon: 1});
                        window.editIndexMenu = true;
                        admin.closeDialog('#editMenuForm');  // 关闭页面层弹窗
                    }else{
                        layer.msg(response.data.message, {icon: 2});
                    }
                    layer.closeAll('loading');
                })
                .catch(function (error) {
                    console.log(error);
                    if(error.response.status === 401 || error.response.status === 403 || error.response.status === 406){
                        // 进行重新登陆
                        localStorage.clear();
                        top.location.href=loginPageUrl;
                    }
                });
            return false;
        });


        //懒加载目录树
        function lazyLoadCatalogTree() {
            var req={
                parent_id : 'root',
            };
            axios.get(macroUrl.catalog.catalogTree,{
                params: req,
                headers:{
                    'Authorization':Authorization
                }
            })
                .then(function (response) {
                    if(response.status == 200 &&response.data.message == "success"){
                        var datas = response.data.data;
                        if (datas.length > 0) {
                            for (const row of datas) {
                                row.isParent = true;
                                row.sub = []; //存放子节点
                                row.drag = true;
                            }
                        }
                        var dataarr = [{"data_type":0,
                            "id":"root",
                            "name":"根目录",
                            "par_id":"",
                            "version":"0",
                            "sub":datas
                        }];
                        $.fn.zTree.init($("#editcatalogTree"), setting.catalogTreeSetting, dataarr);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                    if(error.response.status === 401 || error.response.status === 403 || error.response.status === 406){
                        // 进行重新登陆
                        localStorage.clear();
                        top.location.href=loginPageUrl;
                    }
                });

        }

        //展开树
        function onExpandCatalogTree(event, treeId, treeNode) {
            if(treeNode.sub.length==0){
                var req={
                    parent_id : treeNode.id,
                };
                axios.get(macroUrl.catalog.catalogTree,{
                    params: req,
                    headers:{
                        'Authorization':Authorization
                    }
                })
                    .then(function (response) {
                        if(response.status == 200 &&response.data.message == "success"){
                            var datas = response.data.data;
                            if (datas.length > 0) {
                                for (const row of datas) {
                                    row.isParent = true;
                                    row.sub = []; //存放子节点
                                    row.drag = true;
                                }
                            }
                            const treeObj = $.fn.zTree.getZTreeObj("editcatalogTree");
                            treeObj.addNodes(treeNode, datas);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                        if(error.response.status === 401 || error.response.status === 403 || error.response.status === 406){
                            // 进行重新登陆
                            localStorage.clear();
                            top.location.href=loginPageUrl;
                        }
                    });
            }

        }

        //树节点选中事件
        function zTreeCatalogOnClick(event, treeId, treeNode) {
            editMenu.parent_id = treeNode.id;
            $("#parentName").val(treeNode.name)
        }

    });
</script>